<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优惠券</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
	<script src="../js/public.js"></script>
    <style>
        .coupon .useCoupon>span{
            width: 53%;
            text-align: right;
            font-size: .27rem;
		    color: rgba(18, 18, 18, 0.9);
		    line-height: .7rem;
		    display: inline-block;
		}
        .bd-0 {
            display: none;
        }
		.coupon li .nn .small,.coupon li .bt{
			color:#5F3104;
		}
        .active {
            display: block;
        }
        .hahk{
            width: 100%;
            text-align: center;
            margin-top: 100px;
        }
        .coupon .useCoupon{
            position: relative;
		    height: .7rem;
		    width: 3.51rem;
		    background: url(../img/Rectangle 4@2x.png) no-repeat center;
		    background-size: 3.51rem .7rem;
		    display: block;
		    margin: 0 auto;
        }
        .guoq{
            position: absolute;
            bottom: 5px;
            right: 10px;
            width: 38px;
        }
        .synum{
            position: absolute;
            bottom: .1rem;

            color: rgba(50, 50, 35, 0.25);
            font-size: 12px;
            left: .8rem;
        }
       	.couponN span ,.couponN em,.couponN .bt{
        	color: rgba(50, 50, 35, 0.25)!important;
        }
    </style>
</head>
<body>
    <!--头部-->
   <!-- <div class="public-header flex">
        &lt;!&ndash;<span class="public-header-left-search"></span>&ndash;&gt;
        <span class="public-header-left-back"></span>
        <span class="public-header-center">优惠券</span>
        <span class="public-header-right"></span>
   </div>-->
    <!--正文-->
    <div id="loadingToast" class="weui_loading_toast" style="display:block;">
        <div class="weui_mask_transparent"></div>
        <div class="weui_toast">
            <div class="weui_loading">
                <!-- :) -->
                <div class="weui_loading_leaf weui_loading_leaf_0"></div>
                <div class="weui_loading_leaf weui_loading_leaf_1"></div>
                <div class="weui_loading_leaf weui_loading_leaf_2"></div>
                <div class="weui_loading_leaf weui_loading_leaf_3"></div>
                <div class="weui_loading_leaf weui_loading_leaf_4"></div>
                <div class="weui_loading_leaf weui_loading_leaf_5"></div>
                <div class="weui_loading_leaf weui_loading_leaf_6"></div>
                <div class="weui_loading_leaf weui_loading_leaf_7"></div>
                <div class="weui_loading_leaf weui_loading_leaf_8"></div>
                <div class="weui_loading_leaf weui_loading_leaf_9"></div>
                <div class="weui_loading_leaf weui_loading_leaf_10"></div>
                <div class="weui_loading_leaf weui_loading_leaf_11"></div>
            </div>
            <p class="weui_toast_content">数据加载中...</p>
        </div>
    </div>
    <div id="content" style="display: none">
    <div class="coupon bc-gray">
        <div class="hd flex">
            <a href="javascript:;" class="active">可使用</a>
            <a href="javascript:;">已使用</a>
            <a href="javascript:;">已过期</a>
        </div>
        <div class="bd">
            <div class="bd-1 bd-0 active">
                <div class="hahk"  v-if="use.length == 0">暂无相关优惠券</div>
                <div v-else>
                    <ul>
                    <li  v-for="item in use" >
                    	<div class="useCoupon" :class="item.className" @click="setClick(item.coupon_money,item.className,item.coupon_id,item.user_coupon_id)" style="position: relative;">	
                    		 <div class="img"></div>
	                        <span style="font-size: 18px;color: #5F3104">{{item.coupon_name}}</span>
	                        <p class="nn">
	                            <span class="small">满{{item.use_condition}}元可优惠</span><em>￥</em><span class="big">{{item.coupon_money}}</span>
	                        </p>
	                        <p class="bt">有效期至{{item.valid_data}}</p>
	                        <!--<em class="synum">剩余{{item.number}}张</em>-->
                    	</div>
                    </li>
                    <!-- <li>
                        <div class="img"></div>
                        <span>12345678</span>
                        <p class="nn">
                            <span class="small">可优惠</span><em>￥</em><span class="big">12</span>
                        </p>
                        <p class="bt">
                            有效期:07.08至07.18
                        </p>
                    </li> -->
                    <!-- <li class="active">
                        <div class="img"></div>
                        <span>12345678</span>
                        <p class="nn">
                            <span class="small">可优惠</span><em>￥</em><span class="big">12</span>
                        </p>
                        <p class="bt">
                            有效期:07.08至07.18
                        </p>
                    </li> -->
                </ul>
                </div>
            </div>
            <div class="bd-2 bd-0">
                <div  class="hahk" v-if="used.length == 0">暂无相关优惠券</div>
                <div v-else>
                    <ul>
                        <li v-for="item in used">
                            <div class="img"></div>
                            <span style="font-size: 18px;color: #5F3104">{{item.coupon_name}}</span>
                            <p class="nn">
                                <span class="small">满{{item.use_condition}}元可优惠</span><em>￥</em><span class="big">{{item.coupon_money}}</span>
                            </p>
                            <img src="../img/iconcoupon2.png" class="guoq" alt="">
                            <!-- <p class="bt">
                                	有效期:07.08至07.18
                            </p> -->
                            <!--<em class="synum">剩余{{item.number}}张</em>-->
                        </li>
                    </ul>
                </div>
            </div>
            <div class="bd-3 bd-0">
                <div class="hahk" v-if="expired.length == 0">暂无相关优惠券</div>
                <div v-else>
                <ul>
                     <li v-for="item in expired">
                        <div class="img"></div>
                         <span style="font-size: 18px;color: #5F3104">{{item.coupon_name}}</span>
                        <p class="nn">
                            <span class="small">满{{item.use_condition}}元可优惠</span><em>￥</em><span class="big">{{item.coupon_money}}</span>
                        </p>
                         <img src="../img/iconcoupon1.png" class="guoq" alt="">
                        <!-- <p class="bt">
                            有效期:07.08至07.18
                        </p> -->
                         <!--<em class="synum">剩余{{item.number}}张</em>-->
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </div>
    </div>
	</body>
    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>
    <script>
    	var price = parseFloat(GetQueryString("price"));//订单价格
    	var arrPrice=[];
    	var auction_id = GetQueryString("auction_id");//专场拍的id
    	var order = GetQueryString('order');//
    	var produce_con = GetQueryString("produce_con");//产品数量
    	var produce_rate = GetQueryString("produce_rate");//产品折扣率
    	var order_num = GetQueryString("order_num");//订单编号
    	function changeTime1(shijian,date1) { //把传进来的毫秒数装换成字符串类型然后输出,如果不传或者time怎返回具体时间,date怎返回日期,all返回全部的日期时间
			var show = new Date(Number(shijian));
			var year = show.getFullYear();
			var month = (show.getMonth() + 1) < 10 ? '0' + (show.getMonth() + 1) : show.getMonth() + 1
			var day = show.getDate() < 10 ? '0' + show.getDate() : show.getDate();
			var hour = show.getHours() < 10 ? '0' + show.getHours() : show.getHours();
			var minutes = show.getMinutes() < 10 ? '0' + show.getMinutes() : show.getMinutes();
			var seconds = show.getSeconds() < 10 ? '0' + show.getSeconds() : show.getSeconds();
			var stringdata =  hour + ':' + minutes + ':' + seconds + ' ';
			var stringdata2 = year+'-'+month+'-'+day+' '+hour + ':' + minutes + ':' + seconds;
			var stringdata3 = year+'.'+month+'.'+day;
			if(date1==''||date1==undefined||date1==null||date1=='time'){
				return stringdata
			}else if(date1=='all'){
				return stringdata2;
			}else if(date1=='date'){
				return stringdata3;
			}else{
				return '请检查你的第二个参数,O(∩_∩)O谢谢!';
			}
		}
        $(function () {
            setTimeout(function() {
                $("#loadingToast").hide();
                $("#content").show();
            }, 500);
            new Vue({
                el: 'body',
                data: {
                    use:'',
                    used:'',
                    expired:'',
                    uid:'',
                    isActive: true
                },
                ready: function () {
                    var _self = this;
                    _self.uid = sessionStorage.getItem("uid");
                    this.$http.get(base_url + "ZITAOHUI/user/coupon", {
                        params: {
                            uid: _self.uid,
                            store_id:sessionStorage.seller_storeId//卖家的店铺ID
                        }
                    }).then(
                        function (data) {
                            //console.log(data)
                            var all_data = data.data.extend.data;
                            var use = all_data.use;
                            var used = all_data.used;
                            var expired = all_data.expired;
                            for (var i = 0; i < use.length; i++) {
                              	use[i].valid_data =  changeTime1(use[i].valid_data,'date')
								arrPrice.push(use[i].use_condition);
								if(price){
									if(use[i].use_condition>price){
										//console.log('不可点击');
										use[i].className ='couponN';
									}else{
										//console.log('有优惠')
										use[i].className ='couponY';
									}
								}
                            }
                            for (var i = 0; i < used.length; i++) {
                                used[i].valid_data = changeTime1(used[i].valid_data,'date');
                            }
                            for (var i = 0; i < expired.length; i++) {
                                expired[i].valid_data = changeTime1(expired[i].valid_data,'date');
                            }
                            this.$set('use', use)
                            this.$set('used', used)
                            this.$set('expired', expired);
                        }
                    )
                },
                methods: {
					setClick:function(couPrice,className,coupon_id,user_coupon_id){
						if(price){
							if(className =='couponY'){
								window.location.href='my-address.html?order_num='+GetQueryString("order_num")+'&orderType='+GetQueryString("orderType")+'&price='+price+'&reducePrice='+couPrice+"&auction_id="+auction_id+"&order="+order+"&produce_con="+produce_con+
									"&produce_rate="+produce_rate+"&produceid="+GetQueryString("produceid")+"&storeId="+GetQueryString("storeId")+"&coupon_id="+coupon_id+"&auction_id="+GetQueryString("auction_id")+"&oid="+GetQueryString('oid')+"&user_coupon_id="+user_coupon_id;
							}else{
								alert('不满足此优惠卷条件！');
							}
						}
					}
				}
            })
        })
   </script>
    <script>
        $(function () {
            $('.hd a').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
            })
        })
    </script>
</html>